<template>
	<div class="pacs">
		<el-dialog
			:title="$t('pacs.title')"
			draggable
			v-model="visible"
			:modal="false"
			:close-on-click-modal="false"
			width="840px"
			@keydown.stop
		>
			<div class="querycond">
				<el-form :model="form" label-width="100px" @submit.prevent>
					<el-row :gutter="0">
						<el-col :span="19">
							<el-form-item :label="$t('pacs.formitem.idnumber') + ':'">
								<el-input
									v-model="form.idNumber"
									:placeholder="
										$t('pacs.formitem.idnumber_placeholder')
									"
								></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="7">
							<el-form-item :label="$t('pacs.formitem.name') + ':'">
								<el-input v-model="form.name"></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="5">
							<el-form-item class="right-align" label-width="30px">
								<el-button ref="searchBtn" @click="onSearch">
									<el-icon><Search /></el-icon>
									<span style="vertical-align: middle">
										{{ $t("pacs.formitem.search") }}
									</span>
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0">
						<el-col :span="12">
							<el-form-item
								:label="$t('pacs.formitem.daterange_label') + ':'"
							>
								<el-date-picker
									v-model="form.queryDate"
									type="daterange"
									align="right"
									unlink-panels
									:range-separator="
										$t('pacs.formitem.daterange_separator')
									"
									:start-placeholder="
										$t('pacs.formitem.daterange_start')
									"
									:end-placeholder="$t('pacs.formitem.daterange_end')"
									:shortcuts="pickerOptions.shortcuts"
									@change="onDateChange"
									@keydown.stop
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item :label="$t('pacs.formitem.studytype') + ':'">
								<el-select v-model="form.modality" placeholder="">
									<el-option
										v-for="mod in modalities"
										:key="mod"
										:label="mod"
										:value="mod"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item class="right-align" label-width="30px">
								<el-button @click="onClear">
									<el-icon><Delete /></el-icon>
									<span style="vertical-align: middle">
										{{ $t("pacs.formitem.clear") }}
									</span>
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="studyData" border height="420px" @row-dblclick="onRowClick">
				<el-table-column
					property="StudyId"
					:label="$t('pacs.tablecolumn.studyid')"
					width="100"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					property="PatName"
					:label="$t('pacs.tablecolumn.patname')"
					width="100"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					property="Sex"
					:label="$t('pacs.tablecolumn.gender')"
					width="78"
				></el-table-column>
				<el-table-column
					property="Age"
					:label="$t('pacs.tablecolumn.age')"
					width="78"
				></el-table-column>
				<el-table-column
					property="StudyDate"
					:label="$t('pacs.tablecolumn.studydate')"
					width="168"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					property="Modality"
					:label="$t('pacs.tablecolumn.modality')"
					width="78"
				></el-table-column>
				<el-table-column
					property="ExamItem"
					:label="$t('pacs.tablecolumn.examitem')"
					width="234"
					:show-overflow-tooltip="true"
				></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script lang="js" setup name="SearchPACS">
import { ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { formatDate, desensitizeSubstring } from "@/utils";
import { useArchiveStore } from "../stores/archive";
import { ElMessage } from "element-plus";

const archiveStore = useArchiveStore();
const { t } = useI18n();
const studyData = ref([]);
const visible = ref(false);
const searchBtn = ref(null);
const modalities = ["ALL", "CR", "DX", "MG", "CT", "MR", "RF", "OT", "XA"];
const form = reactive({
	idNumber: "",
	name: "",
	modality: "ALL",
	queryDate: [new Date(), new Date()],
});

const pickerOptions = {
	shortcuts: [
		{
			text: t("pacs.presetDates.today"),
			value: () => {
				const end = new Date();
				const start = new Date();
				return [start, end];
			},
		},
		{
			text: t("pacs.presetDates.yesterday"),
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24);
				return [start, end];
			},
		},
		{
			text: t("pacs.presetDates.lastthreedays"),
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
				return [start, end];
			},
		},
		{
			text: t("pacs.presetDates.lastweek"),
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				return [start, end];
			},
		},
		{
			text: t("pacs.presetDates.lastmonth"),
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				return [start, end];
			},
		},
		{
			text: t("pacs.presetDates.lastyear"),
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
				return [start, end];
			},
		},
	],
};


const show = () => {
	visible.value = true;
};

const onDateChange = (val) => {
	if (searchBtn.value) {
		// console.log("onDateChange: ", searchBtn.value.ref);
		searchBtn.value.ref.focus();
	}
};

const onSearch = () => {
	if (!config.pacs.studyapi) {
		console.log("Please check config.pacs.studyapi");
		return;
	}

	let url = config.pacs.studyapi;

	const sdate = formatDate(
		form.queryDate[0],
		"YYYY-MM-DD"
	);
	const edate = formatDate(
		form.queryDate[1],
		"YYYY-MM-DD"
	);

	url += "?startdate=" + sdate + "&enddate=" + edate;

	if (form.modality !== "ALL") {
		url += "&mod=" + form.modality;
	}
	if (form.idNumber) {
		// url += "&id=" + form.idNumber;
		url += "&cond=" + form.idNumber;
	}

	console.log(url);

	fetch(url)
		.then((response) => response.json())
		.then((data) => {
			if (!data) return;
			// console.log(data);
			studyData.value = data.map((item) => {
				return {...item, PatName: desensitizeSubstring(item.PatName, 1, -1) }
			});
			// console.log(studyData.value);
		})
		.catch((error) => {
			console.log(error);
			ElMessage.error("查询失败");
		});

};

const onClear = () => {
	form.idNumber = "";
	form.name = "";
	form.modality = "ALL";
	form.queryDate = [new Date(), new Date()];
	studyData.value = [];
};

const onRowClick = (row) => {
	// console.log(row);
	if (!config.pacs.imageapi) {
		console.log("Please check config.pacs.imageapi");
		return;
	}

	let url;
	let params = "studyid=" + row.StudyId;
	url = config.pacs.imageapi + "?" + params;

	// console.log(url);
	ElMessage.success("正在获取图像, 请稍候...");
	visible.value = false;

	fetch(url)
		.then((response) => response.json())
		.then((data) => {
			// console.log(data);
			const imageIds = data.map((item) => "dicomweb:" + item);
			//console.log("imageIds: ", imageIds);
			imageIds.forEach((imageId) => {
				archiveStore.archiveFile(imageId);
			});
		})
		.catch((error) => {
			console.log(error);
			ElMessage.error("查询失败");
		});
};

defineExpose({
	show,
});

onMounted(() => {
	// console.log("SearchPACS mounted");
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
	padding: 1px;
	border: 1px solid gray;
	border-radius: 4px;
}
:deep(.el-dialog__header) {
	background: var(--color-dialog-header);
	height: 40px;
	padding: 8px 8px;
	border: none;
}

:deep(.el-dialog__title) {
	color: var(--color-theme-text);
}

:deep(.el-table__body-wrapper) {
	background-color: var(--color-table-bg);
}

:deep(.el-table__header .is-leaf) {
	background-color: var(--color-table-bg);
	color: var(--color-theme-text);
}

:deep(.el-table__cell) {
	background-color: var(--color-table-bg);
	color: var(--color-theme-text);
	padding: 4px 0px;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
	background-color: var(--color-table-row-hover-bg);
}

:deep(.el-table--border .el-table__cell:first-child .cell) {
	padding-left: 4px;
}

.querycond {
	width: 100%;
	height: 100px;
	padding: 8px 0;
	background-color: var(--color-table-bg);
}

:deep(.el-form-item) {
	margin-bottom: 4px;
}

:deep(.el-form-item__label) {
	color: var(--color-theme-text);
}

:deep(.el-form-item__content .el-input .el-input__inner) {
	height: 30px;
	line-height: 30px;
	padding: 0px 0px;
}

:deep(.el-button) {
	height: 32px;
	width: 100px;
	line-height: 32px;
	padding: 0;
}

:deep(.el-range-editor.el-input__inner) {
	height: 32px;
	padding: 0 10px;
}
:deep(.el-date-editor--daterange) {
	width: 320px;
}

:deep(.el-date-editor .el-range-separator) {
	padding: 0;
	width: 8%;
}
</style>
